<template>
    <!-- 导航栏 -->
    <van-nav-bar title="确认订单" left-text="返回" left-arrow @click-left="back" />

    <!-- 收货地址 -->

    <van-contact-card type="edit" v-if="address"
        :name="address.consignee + '&nbsp;&nbsp;&nbsp;&nbsp;' + address.region_text" :tel="address.mobile"
        @click="AddressList" />
    <van-contact-card type="add" add-text="添加收货地址" v-else @click="AddressAdd" />


    <!-- 商品卡片 信息 -->
    <van-card v-for="(item ,index) in cartlist" :price="item.total" :num="item.nums" :desc="'单价：￥'+item.price"
        :title="item.product.name" :thumb="item.product.cover_cdn">

        <template #tags>
            <p>库存：{{item.product.stock}}</p>
        </template>
    </van-card>

    <!-- 订单备注 -->
    <van-field v-model="content" rows="2" name="content" label="订单备注" type="textarea" placeholder="请输入订单备注"
        maxlength="500" show-word-limit />

    <van-field name="thum" label="文件上传">
        <template #input>
            <!-- 文件上传的组件 -->
            <van-uploader v-model="thum" :max-count="1" />
        </template>
    </van-field>

    <!-- 下单 -->
    <van-submit-bar :price="total" button-text="立即下单" @submit="SubmitOrder" />

</template>

<script>
    export default {
        name: "CartConfirm",
        created() {
            this.cartids = this.$route.query.cartids ? this.$route.query.cartids : []

            this.CartData()
            this.address = this.$cookies.get('address') ? this.$cookies.get('address') : null

            if (!this.address) {
                this.AddressData()
            }

        },
        data() {
            return {
                thum: [],
                content: '',            //备注内容
                cartids: [],
                cartlist: [],
                address: null,
                LoginUser: this.$cookies.get('LoginUser')
            }
        },
        computed: {
            total() {
                var total = 0

                for (var item of this.cartlist) {
                    total += parseFloat(item.total)
                }

                total = parseFloat(total) * 100

                return total
            }
        },

        methods: {
            back() {
                this.$router.go(-1)
            },

            // 获取收货地址
            async AddressData() {
                var result = await this.$api.AddressOrder({ userid: this.LoginUser.id })

                if (result.code == 0) {
                    this.$notify({
                        message: result.msg,
                        duration: 1000,
                    })
                }
                this.address = result.data

            },

            // 获取购物车记录
            async CartData() {
                // 组装数据
                var data = {
                    userid: this.LoginUser.id,
                    cartids: this.cartids,
                }

                var result = await this.$api.CartIndex(data)

                if (result.code == 0) {
                    this.$notify({
                        message: result.msg,
                        duration: 1000,
                        onClose: () => {
                            //返回上一个界面
                            this.$router.go(-1)
                        }
                    })

                    return false
                }

                this.cartlist = result.data
                console.log(this.cartlist);
            },

            // 下单
            async SubmitOrder() {
               
                // 组装数据
                var data = {
                    userid: this.LoginUser.id,
                    addrid: this.address.id,
                    cartids: this.cartids,
                    content: this.content
                }

               

                //如果有选择图片就上传
                if (this.thum[0].file) {
                    data.thum = this.thum[0].file
                }

                // console.log(data);
                // return false

                this.$dialog.confirm({
                    message: '是否确认下单',
                }).then(async () => {

                    var result = await this.$api.OrderAdd(data)

                    if (result.code == 0) {
                        this.$notify({
                            message: result.msg,
                            duration: 1000,
                        })
                        return false
                    } else {
                        this.$notify({
                            type: 'success',
                            message: result.msg,
                            duration: 1000,
                            onClose: () => {
                                // 跳转到订单列表
                                this.$router.push({ path: result.url })
                            }
                        })
                    }
                }).catch(() => {
                })
            },

            // 跳转到添加收货地址
            AddressAdd() {
                this.$router.push('/user/address/add')
            },

            // 跳转到收货地址列表界面做选择
            AddressList() {
                // 从订单界面去到收货列表界面
                this.$router.push({
                    path: "/user/address/index",
                    query: {
                        action: "order"
                    }
                })
            }

        },

    }

</script>